<template>
	<view class="page-body" :class="[app.setCStyle()]">
		<view class="card-box list_box">
			<view class="title b-tottom p30" @click="showSelectBox=true">
				{{searchText}}
				<u-icon class="u-icon" name="arrow-down" size="20"></u-icon>
			</view>
			<view v-if="showSelectBox" class="select_box">
				<view class="mask-box" @click="showSelectBox=false"></view>
				<view class="u-grid-box">
					<u-grid :col="4" :border="false">
						<u-grid-item @click="selectChange('0','全部')">
							<view class="w100 b-right">
								<view class="img">
									<u-image src="/static/images/icon_04.png" mode="widthFix"></u-image>
								</view>
								<text>全部</text>
							</view>
						</u-grid-item>
						<u-grid-item @click="selectChange('1','省代')">
							<view class="w100 b-right">
								<view class="img">
									<u-image src="/static/images/province.png" mode="widthFix"></u-image>
								</view>
								<text>省代</text>
							</view>
						</u-grid-item>
						<u-grid-item @click="selectChange('2','市代')">
							<view class="w100 b-right">
								<view class="img">
									<u-image src="/static/images/city.png" mode="widthFix"></u-image>
								</view>
								<text>市代</text>
							</view>
						</u-grid-item>
						<u-grid-item @click="selectChange('3','区代')">
							<view class="w100 b-right">
								<view class="img">
									<u-image src="/static/images/area.png" mode="widthFix"></u-image>
								</view>
								<text>区代</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
				<!-- 空白页 -->
				<empty v-if="itemList.length == 0"></empty>
				<!-- 列表 -->
				<view v-for="(item, index) in itemList" :key="index" class="item b-tottom" v-else>
					<view class="info" style="display: flex; justify-content: flex-start; align-items: center;">
						<u-tag text="省代" type="warning" v-if="item.type ==  'province' "></u-tag>
						<u-tag text="市代" type="success" v-if="item.type == 'city' "></u-tag>
						<u-tag text="区代" v-if="item.type == 'district' "></u-tag>
						<text class="fs28" style="margin-left: 10px;">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	import request from '@/utils/request.js'
	export default {
		components: {
			// uniLoadMore,
			empty
		},
		data() {
			return {
				calendarText: '',
				show: false,
				mode: 'range',
				result: "请选择日期",
				startText: '开始',
				endText: '结束',
				btnType: 'primary',
				startDate: '',
				endDate: '',
				searchText: '全部',
				pageType: '',
				param: {
					level_id: '0,1,2,3',
				},
				income: 0.00,
				outlay: 0.00,
				showSelectBox: false,
				itemList: [],
				loadingType: 'more'
			}
		},
		onLoad(options) {
			this.loadData();
		},
		onShow() {
			// this.app.CHECK_LOGIN(this); //强制登陆
		},
		onReady() {},
		methods: {
			selectChange(type, text) {
				this.searchText = text;
				this.showSelectBox = false;
				this.param.level_id = type;
				this.itemList = [];
				this.loadData('change');
			},
			changeCalendar(e) {
				this.calendarText = e.startDate + "~" + e.endDate;
				this.param.calendar = this.calendarText;
				this.selectChange('all', '全部');
			},
			loadData(source) {
				request.post('/user/distributionIdentityUser',{
					agent_type:this.param.level_id || 0
				}).then(res=>{
					console.log(res,'---------');
					this.itemList = res.lists
				})
				// this.$u.post('member/api.users/getUserLevel', this.param).then(res => {
				// 	this.itemList = this.itemList.concat(res.data.address);
				// })
			}
		}
	}
</script>

<style lang="scss">
	.card-box {
		border-radius: 20rpx;
		margin: 20rpx;
		background-color: #FFFFFF;
	}

	.img44 {
		width: 44rpx;
		height: 44rpx;
	}

	.calendar_box {
		display: flex;
		align-items: center;
		height: 100rpx;

		.text {
			width: 100%;
			text-align: center;

		}
	}

	.gridbox {
		margin: 20rpx 15rpx;

		.card-item {
			background-color: #ffffff;
			box-shadow: 0px 10rpx 15rpx 0px rgba(188, 188, 188, 0.1);
			border-radius: 20rpx;
			text-align: center;
			padding: 60rpx 0;
		}
	}

	.top_static {
		text-align: center;

		.price {
			font-size: 35rpx;
			font-weight: 700;

			text {
				font-size: 28rpx;
			}
		}

		.text {
			color: #999999;
		}
	}

	.b-tottom {
		border-bottom: 1rpx solid $border-color-light;
	}

	.p30 {
		padding: 30rpx !important;
	}

	.list_box {
		height: calc(100vh - 260rpx);

		.title {
			align-items: center;
			font-size: 28rpx;
			border-bottom: 1rpx solid #f8f8f8;
			;

			.u-icon {
				float: right;
				margin-top: 10rpx;
			}
		}

		.select_box {
			position: absolute;
			left: 0;
			right: 0;
			height: calc(100vh - 110rpx);

			.u-grid-box {
				position: absolute;
				top: 0rpx;
				z-index: 99;
				text-align: center;
				background-color: #FFFFFF;
				padding-top: 10rpx;
				width: 100%;
				height: 120rpx;

				.img {
					width: 50rpx;
					height: 50rpx;
					margin: 0rpx auto;
					margin-bottom: 10rpx;
				}
			}

		}

		.list-scroll-content {
			position: relative;
			height: calc(100vh - 380rpx);

			.item {
				padding: 20rpx;

				.info {
					font-size: 28rpx;

					text {
						display: block;
					}
				}

				.money {
					float: right;
					font-size: 28rpx;
					margin-top: 20rpx;
					color: #fc4a5b;
				}

				.income {
					color: #5bc576;
				}
			}
		}
	}
</style>